<template>
  <div>
    <a-popover
      v-model="visible"
      placement="bottomRight"
      trigger="click">
      <template slot="content">
        <div class="fw8 pb10" style="border-bottom:solid 1px #e6e6e6">设置表头</div>
        <div class="scroll h360 pr10">
          <div v-if="loading">
            配置数据加载中...
          </div>
          <div v-else>
            <div v-if="!hasInit">
              配置数据加载出现错误
            </div>
            <div v-else>
              <draggable
                v-model="list"
                handle=".sortHandler"
                chosenClass="chosen"
                forceFallback="true"
                group="module"
                animation="1000"
                @end="onEnd">
                <transition-group>
                  <div v-for="(c,i) in list" :key="`header${i}`" class="flx-b pd6">
                    <div class="w140"><i class="fa fa-arrows sortHandler mr6"/>{{ c.name }}</div>
                    <ZgNumber class="mr10" :width="100" v-model="c.width" @change="onHeaderChange"></ZgNumber>
                    <ZgSwitch v-model="c.isShow" @change="onHeaderChange"></ZgSwitch>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
          <div class="h60"></div>
        </div>
        <div class="flx-e mt10 pt10" style="border-top:solid 1px #e6e6e6">
          <ZgButton @click="loadDefault" type="link" icon="refresh" class="mr10">加载系统默认配置</ZgButton>
          <ZgButton @click="saveConfig" icon="check">保存配置</ZgButton>
        </div>
      </template>
      <span @click="visible=!visible" class="cpt">
        <a-tooltip title="设置表头" placement="top">
          <i class="fa fa-cog"/>
        </a-tooltip>
      </span>
    </a-popover>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    formCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      hasInit: false,
      loading: false,
      list: []
    }
  },
  watch: {
    formCode () {
      this.search()
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () {
      this.hasInit = false
      this.loading = true
      const timer = setTimeout(() => {
        this.loading = false
      }, 30000)
      this.$http.get('/zg-autoform/header/config/list', { formCode: this.formCode }, data => {
        this.list = data[1].map(t => {
          const arr = data[0].filter(x => {
            return t.code === x.columnCode
          })
          return Object.assign({}, t, {
            width: arr.length > 0 ? arr[0].width : 120,
            isShow: arr.length > 0 ? arr[0].isShow : true,
            sort: arr.length > 0 ? arr[0].sort : 0
          })
        })
        this.$nextTick(() => {
          this.list.sort((a, b) => {
            return a.sort - b.sort
          })
          clearTimeout(timer)
          this.hasInit = true
          this.loading = false
        })
      })
    },
    loadDefault () {
      this.$http.get('/zg-autoform/header/config/list', { formCode: this.formCode }, data => {
        this.list = data[1].map((t, i) => {
          return Object.assign({}, t, {
            width: 120,
            isShow: true,
            sort: i
          })
        })
        this.$nextTick(() => {
          this.list.sort((a, b) => {
            return a.sort - b.sort
          })
        })
      })
    },
    saveConfig () {
      const headerList = this.list.map(t => {
        return {
          formCode: this.formCode,
          columnCode: t.code,
          label: t.name,
          width: t.width,
          sort: t.sort,
          isShow: t.isShow
        }
      })
      const param = {
        formCode: this.formCode,
        headerList: headerList
      }
      this.$http.post('/zg-autoform/header/config/update', param, () => {
        this.$success({ title: `表头设置成功！` })
        this.onHeaderChange()
      })
    },
    onEnd () {
      this.saving = true
      this.list.forEach((t, i) => {
        t.sort = i + 1
      })
      this.saving = false
      this.onHeaderChange()
    },
    onHeaderChange () {
      this.$emit('change', this.list.map(t => {
        return {
          formCode: this.formCode,
          columnCode: t.code,
          label: t.name,
          width: t.width,
          sort: t.sort,
          isShow: t.isShow
        }
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
.chosen{
  border-radius:3px;
  background:#409EFF;
  color:#fff;
}
</style>
